<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- 引入 Element UI 的 CSS 文件 -->
    <link rel="stylesheet" href="/element-ui/index.css">
    <style>
        body {
            padding: 20px;
        }
    </style>
</head>

<body>
<div id="app">
    <!-- 查询条件 -->
    <!-- 修改为使用 el-form-item -->
    <div class="search-box">
        <!-- 设置固定的 label-width 让 input 框上下对齐 -->
        <el-form :inline="true" :model="searchForm" label-width="100px" label-position="right">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="表名">
                        <el-input v-model="searchForm.TABLE_NAME"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <!-- 修改父级 el-row 布局 -->
                <el-row type="flex" justify="end">
                    <el-col :span="8">
                        <el-form-item>
                            <el-button @click="search">查询</el-button>
                            <el-button @click="resetSearch">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-row>
        </el-form>
    </div>

    <el-table :data="dataList" style="width: 100%" :height="getTableHeight()"> <!-- 设置表格高度，可根据实际情况调整 -->
        <el-table-column label="序号" width="80" align="center">
            <template slot-scope="scope">{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="TYPE" label="数据源" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="JLBH" label="记录编号" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="SOURCE_TABLE" label="源表" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="TARGET_TABLE" label="目标表" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="SERVER_NAME" label="数据源" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="OPEN" label="是否启动" show-overflow-tooltip align="center">
            <template slot-scope="scope">
                <span v-if="scope.row.OPEN===1" style="color:green;">启用</span>
                <span v-if="scope.row.OPEN===0" style="color:red;">停用</span>
            </template>
        </el-table-column>
        <el-table-column prop="MS" label="备注" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="option" label="操作" min-width="120" align="center">
            <template slot-scope="scope">
                <el-button @click="gotoDetail(scope.row)" type="text" size="small">查看</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 完整的分页组件 -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
    >
    </el-pagination>


        <!-- 在表格下方添加 el-dialog 组件 -->
        <el-dialog
        title="详情页"
        :visible.sync="dialogVisible"
        width="100%">
        <!-- 动态计算表格高度 -->
        <el-table :data="detailData.LIST" style="width: 100%" :height="getTableHeight()"> 
          <el-table-column label="序号" width="80" align="center"><template slot-scope="scope">{{scope.$index + 1}}</template></el-table-column>
          <el-table-column prop="JLBH" label="记录编号" show-overflow-tooltip align="center"></el-table-column>
          <el-table-column prop="FINISH" label="执行进度" show-overflow-tooltip align="center"></el-table-column>
          <el-table-column prop="BEGIN_TIME" label="开始时间" show-overflow-tooltip align="center"></el-table-column>
          <el-table-column prop="END_TIME" label="结束时间" show-overflow-tooltip align="center"></el-table-column>
          <el-table-column prop="UPDATE_QUANTITY" label="执行数量" show-overflow-tooltip align="center"></el-table-column>
        </el-table>
      </el-dialog>
</div>
<!-- 引入 Vue 和 Element UI 的 JS 文件 -->
<script src="/element-ui/Vue.js"></script>
<script src="/element-ui/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                searchForm: {
                    page: this.currentPage,
                    rows: this.pageSize,
                },
                currentPage: 1,
                pageSize: 10,
                dataList: [],
                // 添加弹窗相关数据
                dialogVisible: false,
                detailData: {},
                // 添加 total 属性
                total: 0
            };
        },
        methods: {
            async search() {
                try {
                    this.showLoading();
                    this.searchForm.page = this.currentPage.toString();
                    this.searchForm.rows = this.pageSize.toString();
                    console.log('请求参数:', this.searchForm); // 输出请求参数
                    // 使用 fetch API 从接口获取数据
                    const response = await fetch('/SQLite/pageList', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(this.searchForm)
                    });
                    const data = await response.json();
                    console.log(data);
                    this.dataList = data.data.list;
                    this.total = data.data.total;
                } catch (error) {
                    console.error('获取数据时出错:', error);
                } finally {
                    this.hideLoading();
                }
            },
            handleCurrentChange(page) {
                console.log('当前页:', page);
                this.currentPage = page;
                this.search();
            },
            handleSizeChange(size) {
                console.log('每页显示:', size);
                this.pageSize = size;
                this.search();
            },
            resetSearch() {
                console.log('重置查询条件');
                this.searchForm = {
                    page: this.currentPage,
                    rows: this.pageSize,
                };
                this.search();
            },
            showLoading: function (tip) {
                this.loadingInstance = this.$loading({
                    lock: false,
                    text: tip,
                    background: 'rgba(0, 0, 0, 0.7)'
                })
            },
            hideLoading: function () {
                if (this.loadingInstance) {
                    this.loadingInstance.close()
                }
            },
            gotoDetail(row) {
                this.detailData = row;
                this.dialogVisible = true;
            },
            // 计算表格高度
            getTableHeight() {
                // 这里可以根据实际需求调整减去的值
                return window.innerHeight - 200; 
            },
            // 处理窗口大小变化事件
            handleResize() {
                console.log('窗口大小变化');
                // 强制 Vue 重新渲染表格
                this.$forceUpdate();
            },
        }
    });
</script>
</body>

</html>
